<script lang="ts">
type ListItem = {
  id: number;
  title: string;
  status: number;
  add_time: string;
  remark: string;
};

type ListData = { list: ListItem[] };

const options = [
  {
    type: 'select',
    title: '是否完成',
    key: 'status',
    items: [
      { text: '待办', value: 1 },
      { text: '已完成', value: 2 },
    ],
    value: '',
  },
  {
    type: 'date',
    title: '创建时间',
    key: 'date',
    value: [],
  },
];
</script>

<script setup lang="ts">
import { ref, onBeforeMount } from 'vue';

import request from '@/utils/request';

import NavigationBar from '@/components/navigation-bar/navigation-bar.vue';

import SearchBar from '@/components/search-bar/search-bar.vue';

let page = 0;

const doing = ref(false); // 页面准备

const loading = ref(false); // 请求加载

const finished = ref(false);

const params = ref({ keyword: '', status: '', date: '' });

const list = ref<ListItem[]>([]);

/**
 * 获取数据
 */
const getList = async (init = false) => {
  loading.value = true;

  const data = await request<ListData>('/mock/list', 'GET', {
    ...params.value,
    page,
    limit: 10,
  });
  if (init) {
    list.value = [...data.list];
  } else {
    list.value = [...list.value, ...data.list];
  }
  page += 1;

  loading.value = false;

  if (data.list.length === 0) {
    finished.value = true;
  }
};

/**
 * 初始化
 */
const init = async () => {
  reset();
  await getList(true);
};

/**
 * 重置
 */
const reset = () => {
  page = 1;
  finished.value = false;
};

/**
 * 搜索
 */
const handleSearch = (value: string) => {
  params.value.keyword = value;
  init();
};

/**
 * 确认
 */
const handleConfirm = (value: Record<string, unknown>) => {
  for (let i = 0, item; (item = Object.entries(value)[i++]); ) {
    const [key, _value] = item;
    if (key === 'date') {
      value[key] = (_value as string[]).map((item, index) => {
        if (index === 0) {
          return new Date(`${item.split('-').join('/')} 00:00:00`).getTime();
        } else {
          return new Date(`${item.split('-').join('/')} 23:59:59`).getTime();
        }
      });
      value[key] = (value[key] as number[]).join(',');
    }
  }

  params.value = { ...params.value, ...value };
  init();
};

onBeforeMount(async () => {
  doing.value = false;
  await init();
  doing.value = true;
});
</script>

<template>
  <div class="page">
    <navigation-bar title="列表" :left-arrow="false">
      <search-bar
        placeholder="请输入关键字"
        :data="{ title: '任务筛选', options: options }"
        :config="{ filter: true }"
        @search="(event: string) => handleSearch(event)"
        @confirm="(event: Record<string, unknown>) => handleConfirm(event)"
      >
      </search-bar>
    </navigation-bar>

    <van-list
      class="content"
      v-show="list.length"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="() => getList()"
    >
      <div class="content__item" v-for="(item, index) in list" :key="index">
        <div class="content__title">{{ item.title }}</div>

        <div class="content__row">
          <div class="content__col">
            <div class="content__label">创建时间：</div>
            {{ item.add_time }}
          </div>

          <div
            class="content__col content__status--open"
            v-if="item.status === 1"
          >
            待办
          </div>

          <div
            class="content__col content__status--close"
            v-if="item.status === 2"
          >
            已完成
          </div>
        </div>

        <div class="content__row">
          <div class="content__label">备注：</div>
          {{ item.remark }}
        </div>
      </div>
    </van-list>

    <div class="default" v-show="list.length === 0">
      <img class="default__icon--none" src="@/assets/image/23741@2x.png" />
      <div class="default__text">暂无数据</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f4f5fb;
}

.content {
  flex: 1;
  padding: 12px 16px 16px;

  &__item {
    overflow: hidden;
    padding: 16px 14px;
    background: #ffffff;
    box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.1);
    border-radius: 8px 8px 8px 8px;

    font-weight: 400;
    font-size: 14px;
  }

  &__item + &__item {
    margin-top: 12px;
  }

  &__title {
    margin-bottom: 14px;
    font-weight: 600;
    font-size: 16px;
    color: #333333;
  }

  &__row {
    display: flex;
  }

  &__row + &__row {
    margin-top: 10px;
  }

  &__row:nth-child(2) {
    justify-content: space-between;
  }

  &__row:nth-child(2) &__col:nth-child(1) {
    display: flex;
  }

  &__row:nth-child(2) &__col:nth-child(2) {
    font-weight: bold;
  }

  &__label {
    white-space: nowrap;
    color: #99989b;
  }

  &__status {
    &--open {
      color: #7951f8;
    }

    &--close {
      color: #f14d4d;
    }
  }
}

.default {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin-top: 80px;
  width: 100%;

  &__text {
    margin-top: 22px;

    font-weight: 400;
    font-size: 16px;
    color: #333333;
  }

  &__icon {
    &--none {
      width: 168px;
      height: 168px;
    }
  }
}

:deep(.van-list) {
  flex: 1;
  overflow-y: auto;
}
</style>
